import expandRow from './component/table-expand.vue';
import ImgBox from '../violate-record/ImgBox';
import InforCard from '_c/info-card';
import CountTo from '_c/count-to';
import { ChartPie, ChartBar,HealthChart} from '../../charts';

import './index.less'
import {getAllDriveViolationByDriverRecordId, getDriverRecordList, getUserInfoByAccount} from "../../../api/data";
export default {
  name: 'journey-record',
  components:{
    expandRow,
    ImgBox,
    InforCard,
    CountTo,
    ChartPie,
    ChartBar,
    HealthChart,

  },
  data(){
    return{
      percent:35,
      healthPercent:100,
      isFixTimeLine:false,
      violateModal:false,
      healthModal:false,
      searchKey:'',//索引的列
      searchValue:'',
      queryData: {
        start: '',
        end: '',
        name: '',
        account: '',
        page: '1',
        limit: '10'
      },
      tableColumns: [
        {
          title: '记录编号',
          key: 'udrecordId',
          align:'center'
        },
        {
          title: '工号',
          key: 'account',
          align:'center'
        },
        {
          title: '姓名',
          key: 'name',
          align:'center'
        },
        {
          title: '开始时间',
          key: 'udrecordStart',
          width: 150,
          align:'center'
        },
        {
          title: '结束时间',
          key: 'udrecordEnd',
          width: 150,
          align:'center'
        },
        {
          title: '出发位置',
          key: 'udrecordDeparture',
          align:'center'
        },
        {
          title: '结束位置',
          key: 'udrecordDestination',
          align:'center'
        },
        {
          title: '违规情况',
          key: 'violateCount',
          slot:'action',
          align:'center'
        },
        {
          title: '健康情况',
          key: 'health',
          slot:'health',
          align:'center'
        }
      ],
      tableData: [],
      affixInit:false,
      violateList:[],
      imgList:[],
      inforCardData: [
        { title: '闭眼次数', icon: 'md-person-add', count: 16, color: '#2d8cf0' },
        { title: '吸烟次数', icon: 'md-locate', count: 3, color: '#19be6b' },
        { title: '打哈欠次数', icon: 'md-help-circle', count: 14, color: '#ff9900' },
        { title: '打电话次数', icon: 'md-share', count: 5, color: '#ed3f14' },
        { title: '吃东西次数', icon: 'md-chatbubbles', count: 3, color: '#E46CBB' },
        { title: '酒驾行为', icon: 'md-map', count: 0, color: '#9A66E4' }
      ],
      pieData: [
        { value: 21, name: '闭眼' },
        { value: 4, name: '打电话' },
        { value: 15, name: '打哈欠' },
        { value: 3, name: '吃东西' },
        { value: 3, name: '抽烟' },
        { value: 50, name: '酒驾' },
      ],
      barData: {
        '闭眼': 35,
        '打哈欠': 65,
        '注意力不集中': 55,
        '打电话': 73,
        '抽烟': 80,
        '吃东西': 36,
        '酒驾': 0
      },
      xdata:['13:00','13:05','13:10','13:15','13:20','13:25','13:30','13:35'],
      callQuantity:[31,156,152,122,111,63,53,66],
      successRate:[100,19,25,56,79,84,91,76],
      failureRate:[30,16,64,96,31,36,12,43],
      drivingDetail:{
        imgSrc: '',
        name: '陈昊楠2',
        account: '201906061701',
        phone: '15957169831',
        driveDate:'2021-12-13',
        driveLength: '5h',
        departure: '浙江省杭州市西湖区留下街道留和路288号浙江工业大学屏峰校区',
        destination: '浙江省杭州市下城区潮王路18号浙江工业大学朝晖校区',
        securityEvaluation: '严重违规',
        securityScore:'35分',
      }
    }
  },
  methods:{
    changePage(pageNumber) {
      this.queryData.page = pageNumber
      this.queryList()
    },
    changeSize(pageSize) {
      this.queryData.limit = pageSize
    },
    queryList(){
      getDriverRecordList(this.queryData).then(res=>{
        this.tableData=res.data.obj
        this.tableData.forEach(item=>{
          item.udrecordStart=item.udrecordStart[0]+"-"+item.udrecordStart[1]+"-"+item.udrecordStart[2]+" "+item.udrecordStart[3]+":"+item.udrecordStart[4]+":"+item.udrecordStart[5]
          if (item.udrecordEnd!=null){
            item.udrecordEnd=item.udrecordEnd[0]+"-"+item.udrecordEnd[1]+"-"+item.udrecordEnd[2]+" "+item.udrecordEnd[3]+":"+item.udrecordEnd[4]+":"+item.udrecordEnd[5]
          }
        })
      }).catch(err=>{
      })
    },
    ViolationOfDetails(row,index){
      console.log(row)
      this.inforCardData[0].count=row.udrecordCountEye;
      this.inforCardData[1].count=row.udrecordCountSmoke;
      this.inforCardData[2].count=row.udrecordCountYawn;
      this.inforCardData[3].count=row.udrecordCountPhone;
      this.inforCardData[4].count=row.udrecordCountEat;
      this.inforCardData[5].count=row.udrecordCountDrunken;
      this.drivingDetail.account=row.account;
      this.drivingDetail.name=row.name;
      this.drivingDetail.departure=row.udrecordDeparture;
      this.drivingDetail.destination=row.udrecordDestination;
      this.drivingDetail.driveDate=row.udrecordStart.split(' ')[0];
      this.drivingDetail.account=row.account;
      getUserInfoByAccount(row.account).then(res=>{
        this.drivingDetail.phone=res.data.obj.phone;
        this.drivingDetail.imgSrc='data:image/jpeg;base64,'+res.data.obj.faceImage;
      }).catch(err=>{
        alert(err.message())
      })
      getAllDriveViolationByDriverRecordId(row.udrecordId).then(res=>{
        console.log("======================",res.data.obj)
        res.data.obj.forEach(item=>{
          item.udvtypeImage='data:image/jpeg;base64,'+item.udvtypeImage;
          item.createTime=item.createTime[0]+"-"+item.createTime[1]+"-"+item.createTime[2]+" "+item.createTime[3]+":"+item.createTime[4]+":"+item.createTime[5];
        })
        this.violateList=res.data.obj;
        this.imgList=res.data.obj;
      }).catch(err=>{
        alert(err.message())
      })
      this.violateModal = true
    },
    HealthOfDetails(row,index){
      this.drivingDetail.account=row.account;
      this.drivingDetail.name=row.name;
      this.drivingDetail.departure=row.udrecordDeparture;
      this.drivingDetail.destination=row.udrecordDestination;
      this.drivingDetail.driveDate=row.udrecordStart.split(' ')[0];
      this.drivingDetail.account=row.account;
      getUserInfoByAccount(row.account).then(res=>{
        this.drivingDetail.phone=res.data.obj.phone;
        this.drivingDetail.imgSrc='data:image/jpeg;base64,'+res.data.obj.faceImage;
      }).catch(err=>{
        alert(err.message())
      })
      this.healthModal=true;
    },
    handleTabFix(event) {
      // console.log("滚动事件",event)
      // 触发滚动事件的对象
      let target =event.target
      let scrollTop = target.scrollTop
      let clientHeight = target.clientHeight
      let itemHeight = document.getElementById("timeLine").offsetHeight
      if(itemHeight<clientHeight){
        let offsetTop = document.getElementById("timeLineBlock").offsetTop
        scrollTop > offsetTop+50 ? this.isFixTimeLine = true : this.isFixTimeLine = false
      }

    },
    handleClear(){

    },
    handleSearch(){

    },
    handleTimeItemClick(item){
      this.imgList=[item]
    },
    clickAllItem(){
      this.imgList=this.violateList
    }

  },
  computed:{
    color(){
      let color = '#2db7f5';
      if (this.percent ===100 ) {
        color = '#5cb85c';
      }
      if (this.percent <=35 ) {
        color = '#ff5500';
      }
      return color;
    },
    healthColor(){
      let color = '#2db7f5';
      if (this.healthPercent ===100 ) {
        color = '#5cb85c';
      }
      if (this.healthPercent <=35 ) {
        color = '#ff5500';
      }
      return color;
    }
  },
  // 监听页面滚动
  mounted () {
    window.addEventListener('scroll', this.handleTabFix, true);
    this.queryList()
  },
  created() {
    // this.imgList=this.violateList
  },
  //离开当前组件前一定要清除滚动监听，否则进入其他路由会报错
  beforeRouteLeave (to, from, next) {
    window.removeEventListener('scroll', this.handleTabFix, true)
    next()
  },
}
